/**
 * 病例的组件
 */

import React, {Component} from 'react';
import {
  View,
  TextInput,
  Text,
  StyleSheet,
  Dimensions,
  Button,
  Image,
  ScrollView,
  TouchableOpacity,
} from 'react-native';

const {width} = Dimensions.get('window');
import {Market} from '../../images/index';
export default class Case extends Component {
  constructor(props) {
    super(props);

    this.state = {
      year: '',
      monthDay: '',
      pics: ['', '', ''],
      refresh: false,
    };
  }
  dealTime(time) {
    time = parseInt(time);
    let date = new Date(time);

    this.setState({
      year: date.getFullYear() + '年',
      monthDay: `${date.getMonth() + 1}月${date.getDate()}日`,
    });
  }
  componentDidMount(): void {
    let {time, url} = this.props;
    let _pics = [];
    try {
      _pics = JSON.parse(url);
    } catch (e) {}

    console.log('url', url);
    for (let i = 0; i < 3; i++) {
      try {
        this.state.pics[i] = _pics[i];
      } catch (e) {}
    }
    this.setState({
      refresh: !this.state.refresh,
    });

    this.dealTime(time);
  }

  render() {
    let {
      url,
      disease,
      description,
      time,
      title,
      hospital,
      pressFunc,
      deleteFunc,
      navFunc,
    } = this.props;
    return (
      <View style={styles.container}>
        <View style={styles.dateTextContainer}>
          <Text style={styles.yearText}>{this.state.year}</Text>
          <Text style={styles.monthText}>{this.state.monthDay}</Text>
          <TouchableOpacity
            style={{flexDirection: 'row', justifyContent: 'flex-end'}}
            onPress={() => deleteFunc()}>
            <Text style={styles.rightClick}>x</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.line} />
        <TouchableOpacity style={styles.imgContainer} onPress={() => navFunc()}>
          <Image source={{uri: this.state.pics[0]}} style={styles.img} />
          <Image source={{uri: this.state.pics[1]}} style={styles.img} />
          <Image source={{uri: this.state.pics[2]}} style={styles.img} />
        </TouchableOpacity>
        <View style={styles.caseContentContainer}>
          <View style={styles.caseCaption}>
            <Text>病例标题</Text>
            <Text style={{color: '#008AFF', marginLeft: 5}}>{title}</Text>
          </View>
          <View style={styles.hospital}>
            <View style={{flexDirection: 'row'}}>
              <Text style={styles.keyFont}>医疗单位</Text>
              <Text style={styles.valueFont}>{hospital}</Text>
            </View>
          </View>
          <View style={styles.medicine}>
            <Text style={styles.keyFont}>病症</Text>
            <Text style={styles.valueFont}>{disease}</Text>
          </View>
          <View style={styles.desc}>
            <Text style={styles.keyFont}>描述</Text>
            <Text style={[styles.valueFont, {width: 260}]} numberOfLines={1}>
              {description}
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: 375 - 20,
    height: 230,
    borderRadius: 10,
    elevation: 10,
    backgroundColor: '#ffffff',
    marginLeft: 10,
    marginTop: 10,
  },
  dateTextContainer: {
    flexDirection: 'row',
    marginLeft: (375 - 300 - 20 - 4) / 2 - 2,
    marginTop: 10,
  },
  yearText: {
    color: '#0096FF',
    fontSize: 15,
  },
  monthText: {
    color: '#0096FF',
    fontSize: 12,
    marginLeft: 15,
    marginTop: 2,
  },
  imgContainer: {
    marginTop: 10,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    marginLeft: (375 - 300 - 20 - 4) / 2 - 2,
  },
  img: {
    width: 100,
    height: 100,
    marginLeft: 2,
  },
  caseContentContainer: {
    marginTop: 10,
    marginLeft: (375 - 300 - 20 - 4) / 2 - 2,
    width: 375 - 40,
  },
  caseCaption: {
    flexDirection: 'row',
  },
  hospital: {
    marginTop: 3,
    flexDirection: 'row',
  },
  medicine: {
    flexDirection: 'row',
  },
  desc: {
    flexDirection: 'row',
  },
  keyFont: {
    color: '#008AFF',
    fontSize: 12,
  },
  valueFont: {
    color: '#8C8C8C',
    marginLeft: 8,
    fontSize: 12,
  },
  line: {
    width: 304,
    height: 2,
    backgroundColor: '#F3F7FA',
    marginLeft: (375 - 300 - 20 - 4) / 2 - 2,
    marginTop: 5,
  },
  rightClick: {
    marginLeft: 200,
    // position: 'absolute',
  },
});
